<template>
	<view class="page_container">
		<y-tabs v-model="activeIndex" background="rbga(0,0,0,1)" swipeable @slide-change="slideChange" color="#ff9900" @change="onChange">
			<y-tab class="y-tab-virtual" v-for="(item,index) in tabs" :key="item.key" :title="item.title"
				:titleStyle="getTitleStyle(index)">
				<view class="content-wrap" :style="{backgroundColor: item.color,height:'90vh',color:'rbga(0,0,0,1)'}">
					内容{{item.key}}123 </view>
			</y-tab>
		</y-tabs>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs: [{
					key: 1,
					title: '标签1',
				},{
					key: 2,
					title: '标签2',
				},{
					key: 3,
					title: '标签3',
				},{
					key: 4,
					title: '标签4',
				}, ],
				activeIndex: 0,
				slideIndex: 0, //达到滑动阈值的下标,在当前案例中用于设置标题颜色
			}
		},
		methods: {
			// 内容页滑动时触发（仅barAnimateMode为linear、worm、worm-ease时有效）
			slideChange({
				dx,
				rate,
				targetIndex
			}) {
				// barAnimateMode默认为linear，滑动距离dx大于预设的阈值slidingThreshold=120 时，表示目标下标为切换的下标
				// barAnimateMode为worm、worm-ease时，一半的内容区域宽度才是预设的切换阈值，可以通过rate大于0.5表示目标下标为切换的下标
				this.slideIndex = Math.abs(dx) > 120 ? targetIndex : this.activeIndex;
			},
			getTitleStyle(index) {
				return {
					fontSize: "50rpx",
					color: this.slideIndex === index ? "#ff9900" : "#323233"
				}
			},
			// 当前激活的标签改变时触发
			onChange(index) {
				// 触发change时把slideIndex设为当前下标,避免样式不改变
				this.slideIndex = index;
			}
		}
	}
</script>
<style scoped lang="scss">
	.page_container {
		padding: 50rpx 30rpx 0rpx 30rpx;
	}
</style>
<style>
	page {
		background-color: rgba(0, 0, 0, 1);
	}
</style>